<template lang="html">
	<div class="cataloglist">
		<div class="header">
			<div>
				<img :src="videoImg">
				视频 (10)
			</div>
			<div class="file">
				<img :src="fileImg" class="fileImg">
				资料 ({{id}})
			</div>
		</div>	
		<div class="hr"></div>
		<!-- 列表 -->
		<div class="catalog-list" v-for="(item,index) in getlistData" :key="index">
			<p>{{item.id}} <a>{{item.title}}</a></p> 
			<div class="next">
				<img :src="nextImg">
			</div>			
		</div>
		<!-- 咨询购买 -->
		<div class="buy">
			<img :src="referImg" alt="">
			咨询
			<router-link tag="div" to="" class="btnbuy">
				<p>立即购买</p>
			</router-link >
		</div>
	</div>
</template>
<script>
	export default{
		name:'cataloglist',
		data(){
			return{
			  	videoImg:require("../assets/icon/video.png"),
			  	fileImg:require("../assets/icon/file.png"),
			  	referImg:require("../assets/icon/consult.png"),
			  	nextImg:require("../assets/icon/arrow-top.png"),
			  	getlistData:[],
			  	id:''
			}
		},
		mounted(){
           this.getlistInfo()
		},
		methods:{
			getlistInfo(){
				this.$axios.get(this.HOST + "/catalog")
				.then(res => {
                    this.getlistData = res.data.data
                    this.id = res.data.data[0].id
				})
				.catch(error => {
					console.log(error)
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	.cataloglist{
		.header{
			height:50px;
			line-height: 50px;
			padding-left:18px;
			div{
				float:left;
			}
			.file{
				margin-left: 20px;
                .fileImg{
					width:30px;
				}
			}
			img{
				width:40px;
			}
		}
		.hr{
			height:10px;
			background-color: #ddd;
		}
		.catalog-list{
			position:relative;
			:last-child{
				margin-bottom: 60px;
			}
			height:60px;
			line-height: 60px;
			padding:0 18px;
			p{
              font-size: 20px;
              color:#ddd;
              a{
              	font-size: 16px;
              }
			}
			.next{
                position:absolute;
                top:20px;
                right:20px;
				img{
					width:20px;
					transform: rotate(-180deg)
				} 
			}
		}
		.buy{
			width:100%;
			height:50px;
			line-height: 50px;
			position:fixed;
			background-color: #fff;
			bottom: 60px;
			color: #4F8FE2;
			font-size: 18px;
			img{
				width:30px;
				padding-left: 18px;
			}
	        .btnbuy{
	        	float:right;
	        	width:130px;
	        	text-align: center;
	        	background-color:#4F8FE2; 
	        	color:#fff;
	        }
		}
	}
</style>